<template>
	<view>
		<!--  v-if="list.length!=0" -->
		<book id="book" ref="openbook" :astrictNum="unlock" bindastrict="astrictFn" :list="list" bindend="bookEnd"
			bindchange="bookChange" catchtap="showFn"></book>

	
	</view>
</template>

<script>
	import config from "../../config/config.js"
	import book from "../../component/openBook/index"
	import getData from "./data";
	export default {
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				bookObj: null,
				sys: null,
				list: [],
				unlock: 10,
			}

		},
		components: {
			book
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

			this.sys = uni.getSystemInfoSync()


		},
		mounted() {
			this.list = getData(0)
			this.bookObj = this.$refs.openbook
			this.bookObj.whFn()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			if (this.bookObj && !this.isMute) {
				this.bookObj.MuteFnOff()
			}
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {
			console.log("看书被隐藏")
			this.bookObj.MuteFn()
			this.bookObj.stopPlay()
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			console.log("看书被卸载")
			this.bookObj.MuteFn()
			this.bookObj.stopPlay()
			this.bookObj.destroy()
		},
	}
</script>

<style>
	image{
		width: 100%;
		height: 100%;
	}
	.back {

		top: 26rpx;
		left: 16rpx;
		position: absolute;
		width: 62rpx;
		height: 62rpx;
		
	}

	.catalog {
		position: absolute;
		width: 62rpx;
		height: 62rpx;
		top: 50rpx;
		right: 16rpx;
	}

	.star {
		position: absolute;
		width: 62rpx;
		height: 62rpx;
		top: 109rpx;
		right: 16rpx;
	}

	.mute {
		position: absolute;
		width: 62rpx;
		height: 62rpx;
		top: 169rpx;
		right: 16rpx;
	}

	.bottom {
		width: 676rpx;
		position: fixed;
		padding-bottom: 10rpx;
		z-index: 4;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 20rpx 20rpx 0px 0px;
		/* background: rgba(255, 255, 255, 1); */
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.progressBox {
		width: 493rpx;
		height: 24rpx;
		position: relative;
		top: 10rpx;
	}

	.percentPage {
		font-size: 12rpx;
		font-weight: bold;
		color: #db6d3f;
		width: 41rpx;
	}

	.percentPage {
		font-size: 12rpx;
		font-weight: bold;
		color: #db6d3f;
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
	}

	.progressStick {
		height: 3rpx;
		width: 100%;
		background-color: #db6d3f;
		border-radius: 3rpx;
		margin-top: 9rpx;
	}

	.circle {
		width: 7rpx;
		height: 7rpx;
		background: #df8a67;
		border: 4rpx solid #FFFFFF;
		box-shadow: 0rpx 1rpx 3rpx rgba(12, 207, 255, 0.44);
		border-radius: 50%;
		position: absolute;
		top: 3rpx;
		transform: translateX(-50%);
	}

	.control {
		transition: opacity 500ms;
		transition-timing-function: linear;
		z-index: 2;
	}

	.ZiMu .header {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		border: 5rpx #e1dadb solid;
		overflow: hidden;
		transform: translateY(-50%);
		background-color: #FFFFFF;
	}

	.suspend {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 50%;
		left: 55%;
		transform: translateX(-50%) translateY(-50%);
	}

	.ZiMu view:nth-child(2) {
		flex: 1;
	}

	.ZiMu {
		display: flex;
		position: fixed;
		box-sizing: border-box;
		padding: 0 60rpx;
		z-index: 2;
		bottom: 0;
		width: 100%;
		height: 50rpx;
		background-color: rgba(255, 255, 255, 0.88);
		text-align: center;
		color: #000000;
		line-height: 30rpx;
		size: 15rpx;
	}

	/* 目录 */
	.catalogPage {
		position: fixed;
		z-index: 3;
		width: 100%;
		height: 184rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -5rpx 5rpx rgba(196, 196, 196, 0.16);
		border-radius: 15rpx 15rpx 0px 0px;
		bottom: 0;
		transition: bottom 500ms;
	}

	.catalogItem {
		display: inline-block;
		width: 128rpx;
		/* height: 72rpx; */
		margin: 17rpx;
	}

	.catalogItemImage {
		width: 128rpx;
		height: 60rpx;
		overflow: hidden;
		box-shadow: 0px 5rpx 14rpx rgba(116, 116, 116, 0.3);
		border-radius: 6rpx;
		position: relative;
	}

	.catalogItemIndex {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		opacity: 1;
		margin: 4rpx auto;
		text-align: center;
		line-height: 28rpx;
		font-size: 16rpx;
		font-weight: 400;
		color: #444444;
	}

	.catalogItemIndexActive {
		background: rgba(39, 157, 255, 1);
		color: #FFFFFF;
	}

	.catalogItemImage .cover {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.catalogItemImage .cover image {
		width: 24rpx;
		height: 30rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
	}

	.catalogItemImage>image {
		width: 64rpx;
		height: 60rpx;
		display: inline-block;
		vertical-align: top;
	}

	.panda {
		width: 91rpx;
		height: 102rpx;
		position: absolute;
		left: 27rpx;
		top: -91rpx;
	}
</style>
